<template>
    <div class="labels">
        <ul>
            <li v-for="(label,i) in  labels" :key="i" :style="{backgroundColor:label.bgColor}">{{label.title}}</li>
        </ul>
    </div>
</template>

<script>
import {labels} from "./labels"
    export default {
        name: 'attendance-label',
        data() {
            return {
                labels:labels
            }
        },
    }
</script>

<style lang="less" scoped>
    .labels{
        ul{
            width: 100%;
            text-align: center;
            margin-bottom:20px;
            overflow: hidden;
            li{
                height: 40px;
                line-height: 40px;
                width: 20%;
                float: left;
                list-style: none;
                text-align: center;
                color:#f2f2f2;
                letter-spacing: 1em;
            }
        }
    }
</style>